<template>
  <div class="main">
    <div class="top-main">
      <dz-nav :is-back="true" :back-url="'/my'">
        <template #center>
          <b v-color><qq>Withdrawal</qq></b>
        </template>
      </dz-nav>
    </div>
    <div class="box-1">
      <div class="box-center">
        <div class="titles">
          <img :src="userInfo.headPortraitKey" alt="">
        </div>
        <div class="bottom-box">
          <div class="tip">{{ form.balance }}USDT</div>
        </div>
      </div>
    </div>

    <div class="recharge">
      <div class="info-input">
        <dz-input
            v-model="formData.walletAddress"
            :rule="false"
            :rule-label="$t('PleaseenterWalletaddress')"
            type="text"
            :placeholder="$t('PleaseenterWalletaddress')"
            :label="$t('Walletaddress')"/>
        <dz-input
            v-model="formData.money"
            :rule="rule.money"
            :rule-label="$t('Pleaseenterwithdrawalamount')"
            type="text"
            :placeholder="$t('Pleaseenterwithdrawalamount')"
            :label="$t('Amount')"/>
        <dz-input
            v-if="form.pwdStatus"
            v-model="formData.password"
            :rule="rule.password"
            :rule-label="$t('Transactionpassword')"
            type="password"
            :placeholder="$t('Transactionpassword')"
            :label="$t('Transactionpassword')"/>
      </div>
      <div class="tips">
        <p class="box">
          <span>{{$t('Minimum')}}</span>
          <b>{{ form.min }} USDT</b>
        </p>
        <p class="box">
          <span>{{$t('Minimum')}}</span>
          <b>{{ form.max }} USDT</b>
        </p>
        <p class="box">
          <span>{{$t('TAX')}}</span>
          <b>{{ form.fee }}%</b>
        </p>
      </div>
      <div class="tips-content">
        <div class="title">{{form.title}}</div>
        <div class="content">
          <span v-html="form.dzcontent"></span>
        </div>
      </div>
      <dz-safe></dz-safe>
      <div class="bottom-box">
        <div class="btn" @click="submit">
          <qq>confirm</qq>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {createWithdrawOrder, getWithDraw} from "@/api/apiFox";
import {Dialog, Toast} from "vant";

export default {
  data(){
    return{
      formData: {
        walletAddress: '',
        money: '',
        password:''
      },
      rule:{
        money:false,
        password:false
      },
      form:{},
      userInfo:{},
      curPaymentIndex: 0,
      curPayment: {},
      payments: [],
      lists: [],
    }
  },
  methods:{
    choosePayment(index) {
      this.curPaymentIndex = index
      this.curPayment = this.payments[this.curPaymentIndex]
    },
    getUserInfo(){
      this.$store.dispatch('getUSerInfo').then(res=>{this.userInfo=res}).catch(err=>{})
    },

    submit(){
      console.log(this.form)
      if (this.form.pwdStatus){
        if (this.formData.money===''){
          this.rule.money = true
        }else if (this.formData.password===''){
          this.rule.password = true
        }else{
          this.rule.password=false
          this.rule.money=false
          if (this.formData.money > this.form.balance){
            Toast(this.$t('exceedingTheMaximumLimit'))
          }else{
            createWithdrawOrder(this.formData).then(res=>{
              Toast.success(this.$t('Success'))
              this.$router.push('/withdrawalRecord').catch(err=>{})
            }).catch(err=>{})
          }
        }
      }else{
        if (this.formData.money===''){
          this.rule.money = true
        }else{
          this.rule.money=false
          if (this.formData.money > this.form.balance){
            Toast(this.$t('exceedingTheMaximumLimit'))
          }else{
            createWithdrawOrder(this.formData).then(res=>{
              Toast.success(this.$t('Success'))
              this.$router.push('/withdrawalRecord').catch(err=>{})
            }).catch(err=>{})
          }
        }
      }
    },

    getList(){
      let form = {
        language: "ZH_EN",
        officialType: 6
      }
      getWithDraw(form).then(res=>{
        console.log(res)
        this.form = res
        if (res.wallet){
          console.log('目前一切正常')
        }else{
          Dialog.alert({
            title: this.$t('tips'),
            message: this.$t('bandWallet'),
            confirmButtonText:this.$t('goToWallet')
          }).then(() => {
            this.$router.push('/wallet').catch(err=>{})
          });
        }
      }).catch(err=>{})
    }
  },
  mounted() {
    this.getList()
    this.getUserInfo()
  }
}
</script>

<style scoped lang="scss">
.main{
  width: 100%;
  min-height: 100vh;
  background: url("@/assets/images/bg.jpg") top center no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  .top-main{
    width: 100%;
    .avatar{
      padding-top: 10px;
      text-align: center;
      .img-avatar{
        width: 180px;
        height: 180px;
      }
    }
  }
  .box-1{
    width: 100%;
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    .box-center{
      width: 331px;
      background: url('@/assets/images/CARD_1.png') no-repeat;
      background-size: 100%;
      height: 148px;
      border-radius: 10px;
      position: relative;
      .titles{
        width: 100%;
        text-align: center;
        margin-top: -30px;
        img{
          width: 122px;
          height: 123px;
          object-fit: cover;
        }
      }
      .bottom-box{
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        .tip{
          width: 185px;
          height: 47px;
          background: rgba(255,184,41,0.37);
          border-radius: 30px 30px 30px 30px;
          font-weight: bold;
          font-size: 28px;
          color: #533DF1;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
    .box-center-1{
      width: 324px;
      height: 253px;
      background: #FFFFFF;
      border-radius: 10px;
      .top{
        width: 324px;
        height: 40px;
        background: #FFFFFF;
        border-radius: 10px 10px 0px 0px;
        font-weight: bold;
        font-size: 20px;
        color: #000000;
        text-align: center;
        line-height: 40px;
      }
      .vip-info{
        width: 324px;
        height: 213px;
        background: #F2F2F2;
        border-radius: 0px 0px 10px 10px;
        padding: 22px 15px;
        box-sizing: border-box;
        .box-nav{
          width: 100%;
          height: 42px;
          display: flex;
          justify-content: space-between;
          margin-bottom: 18px;
          img{
            object-fit: cover;
            width: 42px;
            height: 42px;
            margin-right: 10px;
          }
          .right{
            width: 100%;
            .title{
              font-weight: bold;
              font-size: 14px;
              color: #666666;
            }
            .content{
              font-weight: bold;
              font-size: 14px;
              margin-top: 6px;
              color: #373737;
            }
          }
        }
      }
    }
  }
  .recharge{
    padding: 15px 15px 0;
    .payments{
      display: flex;
      overflow: hidden;
      overflow-x: scroll;
      .item{
        width: 109px;
        height: 92px;
        background: #FFFFFF;
        box-shadow: 0px 4px 4px 0px rgba(160,58,58,0.25);
        border-radius: 70px 70px 70px 70px;
        padding: 16px 0;
        text-align: center;
        box-sizing: border-box;
        margin-right: 8px;
        flex-shrink: 0;
        &:last-child{
          margin-right: 0;
        }
        &.active{
          background: linear-gradient( 180deg, #8372FF 0%, #533DF1 100%);
          box-shadow: 0px 4px 4px 0px rgba(160,58,58,0.25);
          .name{
            color: #FFFFFF;
          }
        }
        .icon{
          width: 40px;
          height: 40px;
          //outline: 1px dashed red;
        }
        .name{
          font-weight: bold;
          font-size: 12px;
          color: #533DF1;
          //outline: 1px dashed red;
        }
      }
    }
    .info-input{
      margin-top: 20px;
      width: 100%;
    }
    .bottom-box{
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: fixed;
      bottom: 0;
      left: 0;
      .btn{
        width: 343px;
        height: 50px;
        background: linear-gradient( 90deg, #973DF1 0%, #5134C3 100%);
        box-shadow: 0px 4px 4px 0px rgba(92,18,187,0.25), inset 0px 4px 4px 0px rgba(249,249,249,0.25);
        border-radius: 30px 30px 30px 30px;
        font-weight: bold;
        font-size: 16px;
        color: #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .tips{
    width: 100%;
    margin-top: 60px;
    p{
      display: flex;
      align-items: center;
      width: 100%;
      font-weight: 400;
      color: #5B6B86;
      font-size: 14px;
      margin-top: 20px;
      b{
        margin-left: 10px;
        color: #5A4CBB;
      }
    }
  }
  .tips-content{
    width: 100%;
    margin-top: 20px;
    color: #5A4CBB;
    font-size: 18px;
    .content{
      font-size: 14px;
      color: #3F3F3F;
      line-height: 24px;
    }
  }
  .list{
    height: 500px;
    background: linear-gradient( 180deg, #FFF0C9 0%, #D49188 100%);
    border-radius: 30px 30px 0px 0px;
    padding: 20px 15px;
    box-sizing: border-box;
    .lists{
      height: 460px;
      padding: 0 15px;
      background: #FFFFFF;
      border-radius: 20px;
      box-shadow: 0px 2px 4px 0px rgba(31,33,88,0.25);
      box-sizing: border-box;
      .item{
        padding: 10px 0;
        border-bottom: 1px solid rgba(133,133,138,0.2);
        p{
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          color: #5B6B86;
          &:first-child{
            margin-bottom: 5px;
          }
          .desc{
            font-size: 14px;
            color: #242B35;
            word-break: break-all;
          }
          .money{
            font-weight: bold;
            font-size: 14px;
            color: #533DF1;
          }
        }
      }
    }
  }
}
</style>